<template>
	<view class="bg" :style="shadeColor"></view>
	<view class="content">
		<view class="content_wrap">
			<view class="content_text">
				<image src="../../static/img/wordDay/left_quotation.png" mode=""></image>
				{{contentText}}
				<image src="../../static/img/wordDay/right_quotation.png" mode=""></image>
			</view>
			<view class="content_author">
				———{{author}}
			</view>
			<view class="btn">
				<button :plain='true' @click="changeBcg">切换背景</button>
				<button :plain='true' @click="getEveryWord">切换一言</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		mounted() {
			this.changeBcg()
			this.getEveryWord()
		},
		data() {
			return {
				colorList: [
					"background-image:linear-gradient(-20deg, #e9defa 0%, #fbfcdb 100%)",
					"background-image:linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%)",
					"background-image:linear-gradient(to top, #fad0c4 0%, #fad0c4 1%, #ffd1ff 100%)",
					"background-image:linear-gradient(to right, #ffecd2 0%, #fcb69f 100%)",
					"background-image:linear-gradient(to top, #fdcbf1 0%, #fdcbf1 1%, #e6dee9 100%)",
					"background-image:linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%)",
					"background-image:linear-gradient(to top, #a8edea 0%, #fed6e3 100%)",
					"background-image:linear-gradient(to top, #cd9cf2 0%, #f6f3ff 100%)"
				],
				shadeColor: "",
				contentText: "",
				author: ""
			}
		},
		methods: {
			// 切换背景的回调
			changeBcg() {
				let index = Math.floor((Math.random() * this.colorList.length));
				this.shadeColor = this.colorList[index];
			},
			// 每日一言的回调
			async getEveryWord() {
				let res = await uni.request({
					url: 'https://v1.hitokoto.cn/',
					method: 'POST',
					data: {
						'c': 'd',
						'c': 'e',
						'c': 'h',
						'c': 'i',
						'c': 'k'
					},
				})
				this.contentText = res.data.hitokoto;
				this.author = res.data.from;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bg {
		position: fixed;
		top: 0;
		left: 0;
		right: 0%;
		bottom: 0;
		z-index: -1;
	}

	.content {
		position: relative;

		.content_wrap {
			box-sizing: border-box;
			padding: 20rpx;
			position: absolute;
			top: 500rpx;
			font-size: 48rpx;
			font-family: '楷体';

			.content_text {

				image {
					// display: inline;
					width: 50rpx;
					height: 50rpx;
				}
			}

			.content_author {
				margin-top: 40rpx;
				float: right;
				color: #778899;
			}

			.btn {
				display: flex;
				margin-top: 60%;

				button {
					font-size: 36rpx;
					border: 4rpx solid grey;
				}
			}
		}

	}
</style>